import { useEffect, useRef } from "react";
import {
    ArcRotateCamera, Color4, Engine, HemisphericLight, Mesh, MeshBuilder, Plane, Scene, UniversalCamera,
    StandardMaterial, Vector3, Color3, DirectionalLight, Animation, CircleEase, EasingFunction, VertexBuffer, BackgroundMaterial, Texture, Ray, Matrix, RayHelper, Vector4,
} from '@babylonjs/core';
import Play from '../component/Player';
import { applyMatrix4, getDefaultMatrix } from '../component/MathLib';


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const engine = new Engine(canvas, true);
const scene = new Scene(engine);

const camera = new UniversalCamera('Camera', new Vector3(0, 10, 0), scene);
camera.setTarget(new Vector3(0, 0, 0));
camera.attachControl(canvas, true);

const play = new Play(camera);
play.start();

const updateAction: ((time: number) => {})[] = [];

const light = new HemisphericLight('pxg', new Vector3(1, 1, 0), scene);
const ground = MeshBuilder.CreateGround('ground', { width: 8, height: 8, updatable: true }, scene);

const mat01 = new BackgroundMaterial('mat01', scene);
mat01.useRGBColor = false;
mat01.primaryColor = new Color3(1, 0, 0);

const mat02 = new BackgroundMaterial('mat01', scene);
mat02.useRGBColor = false;
mat02.primaryColor = new Color3(1, 1, 0);

const mat03 = new BackgroundMaterial('mat01', scene);
mat03.useRGBColor = false;
mat03.primaryColor = new Color3(1, 0, 1);


const box1 = MeshBuilder.CreateBox('box01', { width: 0.5, height: 0.5, depth: 0.5 }, scene);
box1.material = mat01;
box1.position.y = 0.25;

// box1.enableEdgesRendering(1);
// box1.edgesWidth = 2;
// box1.edgesColor = new Color4(1, 1, 0, 1);

const box2 = MeshBuilder.CreateBox('box2', { width: 0.5, height: 0.5, depth: 0.5 }, scene);
box2.material = mat02;
box2.position.set(1, 0.25, 0);

const box3 = MeshBuilder.CreateBox('box3', { width: 0.5, height: 0.5, depth: 0.5 }, scene);
box3.material = mat03;
box3.position.set(1.2, 0.25, -2);

//基础方向点
const node1 = new Vector3(0.4, 0.25, 0);
const node2 = new Vector3(1, 0.25, 0);
const len = 9;

//ray点
const node11 = node1;
const node21 = node2.clone().subtract(node1).normalize().multiplyByFloats(len, len, len).add(node1);

const m1 = getDefaultMatrix();

updateAction.push((time) => {
    const j = time / 8000;
    const mat = m1.clone().multiply(Matrix.RotationY(j * Math.PI * 2));

    const n1 = applyMatrix4(node11.clone(), mat);
    const n2 = applyMatrix4(node21.clone(), mat);

    const ray = new Ray(n1, n2, 0.2);
    const pickResult = scene.pickWithRay(ray);
    console.log(pickResult?.pickedMesh?.id);


    // const pickResults = scene.multiPickWithRay(ray);//返回一个数组,获得全部全部对象
    // console.log(pickResults);

    const rayHelper = RayHelper.CreateAndShow(ray, scene, new Color3(1, 1, 1));
    //rayHelper.attachToMesh(box2, n1, n2, 1);//作用未知
    // const rayHelper = new RayHelper(ray);//或者实例化一个Helper对象
    // rayHelper.show(scene);

    return '';
});





const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
            ani(0);
        }
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;

function ani(time: number) {
    updateAction.forEach((action) => {
        action(time);
    })
    scene.render();

    requestAnimationFrame(ani);
};